<template>
  <div>
    <div v-if="noData" class="no-data-show">
      <no-data size="200px"></no-data>
    </div>
    <!-- 列表数据展示 -->
    <div class="record-wrapper" v-else>
      <div class="records-list" v-show="!showDetail">
        <dl class="record" v-for="item of records" :key="item.uid"  @click="getRecordDetail(item.uid)">
          <dt v-if="item.modifyDesc.title">
            <h1 class="title" v-text="item.modifyDesc.title"></h1>
          </dt>
          <dd>
            <div class="content">
              <p v-text="item.modifyDesc.content"></p>
            </div>
            <div class="time">
              <span>修改时间: </span>
              <span v-text="format(new Date(item.modifyDesc.createTime))"></span>
            </div>
          </dd>
        </dl>
      </div>
      <!-- 详情数据展示 -->
      <div class="record-detail" v-show="showDetail">
        <div class="content">
          <i class="el-icon-arrow-left return-icon" @click="changeShowDetailStatus" title="返回"></i>
          <h2 class="record-title" v-text="record.modifyDesc.title"></h2>
        </div>
        <div class="info">
          <p v-text="record.modifyDesc.content"></p>
        </div>
        <div class="before-data">
          <el-form class="" :model="record">
            <div class="param-desc color-red">修改前接口的入参数据：</div>
            <el-form-item>
              <el-input readonly :value="JSON.stringify(record.oldInParams, null, 2)" type="textarea" class="record-param" rows="10" resize="none"></el-input>
              <el-input readonly :value="JSON.stringify(record.oldDescInParams, null, 2)" type="textarea" class="record-param" rows="10" resize="none"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="now-data">
          <el-form class="" :model="record">
            <div class="param-desc">修改后接口的入参数据：</div>
            <el-form-item>
              <el-input readonly :value="JSON.stringify(record.newInParams, null, 2)" type="textarea" class="record-param" rows="10" resize="none"></el-input>
              <el-input readonly :value="JSON.stringify(record.newDescInParams, null, 2)" type="textarea" class="record-param" rows="10" resize="none"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <!-- 出参数据展示 -->
        <div class="before-data">
          <el-form class="" :model="record">
            <div class="param-desc color-red">修改前接口的出参数据：</div>
            <el-form-item>
              <el-input readonly :value="JSON.stringify(record.oldResultOutParams, null, 2)" type="textarea" class="record-param" rows="10" resize="none"></el-input>
              <el-input readonly :value="JSON.stringify(record.oldDescInParams, null, 2)" type="textarea" class="record-param" rows="10" resize="none"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="now-data">
          <el-form class="" :model="record">
            <div class="param-desc">修改后接口的出参数据：</div>
            <el-form-item>
              <el-input readonly :value="JSON.stringify(record.newResultOutParams, null, 2)" type="textarea" class="record-param" rows="10" resize="none"></el-input>
              <el-input readonly :value="JSON.stringify(record.newDescOutParams, null, 2)" type="textarea" class="record-param" rows="10" resize="none"></el-input>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>

</template>

<script>
import { request } from "@/js/_x/utils/request";
import { format } from "@/js/_x/utils/date";
import { mapState } from 'vuex'
import NoData from "../../../common/noData"

const defaultRecord = {
  modifyDesc: {}
}
export default {
  name: "update",
  components: {
    NoData
  },
  computed: {
    ...mapState({
      currentProject: state => state.aside.currentProject,
      currentIntf: state => state.aside.currentIntf
    })
  },
  watch: {
    currentIntf: function () {
      // 获取列表数据
      this.resetDate()
    },
    times: function () {
      this.resetDate()
    }
  },
  props: ["times"],
  data () {
    return {
      noData: true,
      showDetail: false,
      record: this.generateRecord(),
      records: []
    };
  },
  methods: {
    format,
    changeShowDetailStatus () {
      this.showDetail = !this.showDetail;
    },
    // 获取记录列表数据
    getUpdateRecords () {
      let params = {
        projectName: this.currentProject,
        id: this.currentIntf.id
      }
      request("api/interface/node/get_history_record", params, resp => {
        if (resp.result && resp.data && resp.data.length > 0) {
          this.noData = false
          this.records = resp.data
        } else {
          this.noData = true
        }
      }).catch(error => {
        this.noData = true
        console.log(error);
      })
    },
    // 获取修改记录详情数据
    getRecordDetail (uid) {
      let params = {
        projectName: this.currentProject,
        id: this.currentIntf.id,
        uid
      }
      // 重置数据
      this.record = this.generateRecord()
      // 发起请求
      request("api/interface/node/get_history_record_detail", params, resp => {
        if (resp.result && resp.data) {
          this.record = resp.data
          // 显示详情数据
          this.changeShowDetailStatus()
        } else {
          this.$message({ type: "error", message: `${resp.message},获取数据失败!` })
        }
      }).catch(error => {
        console.log(error);
        this.$message({ type: "error", message: "后台异常,获取数据失败!" })
      })
    },
    /* 生成初始化的record对象-重置record */
    generateRecord () {
      return JSON.parse(JSON.stringify(defaultRecord))
    },
    /* 重新获取列表数据 */
    resetDate () {
      // 获取数据
      this.getUpdateRecords()
      // 重置详情框数据
      this.record = this.generateRecord()
      this.showDetail = false
    }
  }
};
</script>

<style lang="scss" scoped>
@import "~@/assets/styles/mixin.scss";
@import "~@/assets/styles/home/content/updateRecord.scss";
</style>
